<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.active {
			height: 100px;
			width: 100px;
			background-color: gray;
		}
		.bg-danger {
			background-color: red;
		}
		.bg-blue {
			background-color: blue;
		}
	</style>
</head>
<body>
	<!-- 
	 
	 -->
	<div id="app">
		<h1>{{ msg }}</h1>
		<hr>
		<!-- class 对象语法 -->
		<!-- <div :class="{ active: isActive }"></div> -->
		<!-- <div class="static" :class="{ active: isActive, 'bg-danger': isDanger }"></div> -->
		<!-- <div class="static" :class="classObj"></div> -->
		<!-- class 数组语法 -->
		<!-- <div class="static" :class="[activeCls, dangerCls]"></div> -->
		<!-- <div class="static" :class="[isActive ? activeCls : '', dangerCls]"></div> -->
		<!-- style 对象语法 -->
		<!-- <div class="static" :style="{ width: size * 3 + 'px', height: size + 'px', backgroundColor: 'blue' }"></div> -->
		<!-- <div class="static" :style="styleObj"></div> -->
		<!-- <div class="static" :style="[styleObj, { borderRadius: '50%' }]"></div> -->
	</div>
	
	<script src="vue.js"></script>
	<script>
		
		const app = new Vue({
			data: {
				msg: "Hello Vue: class & style！",
				isActive: true,
				isDanger: false,
				classObj: { 
					active: true, 
					'bg-danger': false,
				},
				activeCls: 'active',
				dangerCls: 'bg-danger',
				size: 100,
			},
			computed: {
				styleObj: function() {
					return {
						width: this.size * 3 + 'px',
						height: this.size + 'px',
						backgroundColor: 'skyblue',
					}
				}
			}
		}).$mount("#app")
	</script>
</body>
</html>